<template>
  <div id="app">
    <!--<transition enter-active-class="animated bounceInUp" leave-active-class="animated zoomOutUp ">-->
    <!--<headerTitle v-show='Tshow'></headerTitle>-->
    <!--</transition>-->
    <div id='music'>
      <section class="vbox">
        <!--顶部搜索栏 S-->
        <musicHeader></musicHeader>
        <!--顶部搜索栏 E-->
        <section>
          <section class="hbox stretch">
            <!--左侧边导航栏 .aside -->
            <leftNav></leftNav>
            <!--左侧边导航栏 /.aside -->
            <section id="content">
              <transition enter-active-class="animated bounceInUp" leave-active-class="animated zoomOutUp ">
                <keep-alive exclude='musicStateContent'>
                  <router-view></router-view>
                </keep-alive>
              </transition>
            </section>
          </section>
        </section>
      </section>
      <div class='hide'>
        <audio ref='audio' @canplay='ready' @error='error' @timeupdate='updateTime' @ended='end' :src="musicUrl"
               title="Busted Chump" controls></audio>
      </div>
    </div>


  </div>
</template>

<script>
  import {mapActions, mapGetters} from 'Vuex'
  import headerTitle from '@/components/headerTitle.vue'
  import leftNav from './components/music/leftNav.vue'
  import musicHeader from './components/music/musicHeader.vue'
  import rightBillboard from './components/music/rightBillboard.vue'
  import musicContent from './components/music/musicContent.vue'
  import musicFooter from './components/music/musicFooter.vue'

  export default {
    name: 'app',
    data() {
      return {
        songReady: false
      }
    },
    components: {
      headerTitle,
      leftNav, musicHeader, rightBillboard, musicFooter, musicContent
    },
    computed: {
      ...mapGetters([
        'musicUrl',
        'Tshow',
        'playing',
        'percent',
        'allTime',
        'mode',
        'currentLyric'
      ])
    },
    mounted() {
      this.$store.commit('fetchData',{url: '/login/cellphone?phone=17512018620&password=zm06201118',func: 'login'})
    },
    methods: {
      ready() {
        this.$store.commit('songReady')
      },
      error() {
        this.$store.commit('songReady')
      },
      updateTime(e) {


//        不知道这是什么傻逼bug video 原生的方法获取不到歌曲时间了
        let time = this.$refs.audio.currentTime;
//        console.log(time)
        let allTime = this.$refs.audio.duration;
//        let at=document.querySelector('audio');
//        console.log(at)
        this.$store.commit('setCurrentTime', {time: time, allTime: allTime})
      },
      end() {

        if (this.mode == 2) {
          this.loop();
        } else {
          this.$store.commit("nextMusic")
        }
      },
      loop() {
        this.$refs.audio.currentTime = 0;
        this.$refs.audio.play();
        if(this.currentLyric) {
          this.currentLyric.seek(0)
        }
      }
    },
    watch: {
      musicUrl() {
        const audio = this.$refs.audio;
        this.$nextTick(() => {
          this.playing ? audio.play() : audio.pause();
        })
      },
      playing(newPalying) {
        const audio = this.$refs.audio;
        this.$nextTick(() => {
          newPalying ? audio.play() : audio.pause();
        })
      },
      percent(newPercent) {
        const currentTime=this.allTime * newPercent;
        console.log(currentTime)
        this.$refs.audio.currentTime = currentTime;
        if(this.currentLyric) {
          this.currentLyric.seek(currentTime * 1000)
        }
      }
    }
  }
</script>

<style>
  #music {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    overflow-y: hidden;
  }
</style>
